<template>
  <div class="index-Container">
    <div class="custom-navbar">
      <CustomNavbar :activeNav="activeNav" @update-nav="changnav" />
    </div>
    <div class="content-container">
      <!-- 内容区域 -->
    </div>
  </div>
</template>

<script>
import CustomNavbar from '@/components/index/CustomNavbar.vue';

export default {
  name: 'IndexContainer',
  components: {
    CustomNavbar
  },
  data() {
    return {
      activeNav: '1'
    };
  },
  methods: {
    changnav(nav) {
      this.activeNav = nav;
    }
  }
};
</script>

<style lang="scss" scoped>
.index-Container {
  background-color: rgb(238, 247, 253);
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;

  .custom-navbar {
    flex: 2.5;
  }

  .content-container {
    flex: 7.5;
    overflow: auto;
  }
}
</style>
